<template>
	<view>
		
			<view style="margin: 20rpx;">
				<text @tap="play('https://hlsliveali-cdn.ysp.cctv.cn/8277DA9492AD660F4B53DD9A74B610C11F1E32519AA29A3DE443F521D13C7D8AA556AA20B980BC7EDC0D89E13106D426881D73F7EDE73FB2DA8A9B5866AA916E41D1484D566F8DBCF418E0BEFBFACF7C8CCAA43F03DDA4F805008BB03FFCA589A87E7AABBF3C954052C3D14646C362C3/2000295502.m3u8?from=player&svrtime=1702812855&pid=600002520&cdn=5506&revoi=A35E3DEEDEA35B990E6271B36EB81A37ACB6FBB364081C80688353D7E707E7879D7A59F8C319798CC6E4887D3E071AD9AFA82906DA4FD6810561951E301E3E2D2A1A25B1C4189B37F8A951E263C59774E7120CEE9BDD33DE1B7025D2A4BFCF3EAF70E6B14E1E8A1006ABD94D75E65A9A9D2F9F32DD0EE305CEC2A5D3710A44D9D372B1AAA5969795E53DFE56B67F8CABF0BA732441AC93D79F8915ECB2C3D6EFCE834C707AF685C6F2E90C206517B314CBC6FB96DA9D37EE08D5AAF14A1C3A8BF096EC86B9C5CA99')" class="vodclass" v-for="(item,index) in list" :key="index">{{item.name}}</text>
			</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		computed: {
			user() {
				return this.$store.state.userinfo;
			}
		},
		onLoad() {
			this.getdata();
		},
		onReady() {
		},
		onUnload() {

		},
		methods: {
			getdata(){
				this.GetJson(this.ip + 'live.php', 'GET', {}, e => {
					this.list = [...this.list, ...e.list];

				})
			},
			play(item) {
				console.log(item.url)
				uni.navigateTo({
					url: '../play/vplay?play=' + item
				})
			}
		},
		onReachBottom() {
			if (this.load == false) this.getdata()
		},

		onPullDownRefresh() {
		}
	}
</script>

<style>
	page {
		background-color: #181b2e;
	}
    .view-top{
		background: linear-gradient(45deg,#181b2e,#181b2e,#181b2e);
		width: 750rpx;
		height: 400rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
	}
	.sotext{
		margin-top:15rpx;
		margin-left: 15rpx;
		color: #4f5684;
		font-size: 30rpx;
	}
	.jiconfont{
		margin-top:91rpx;
		margin-left: 670rpx;
		color: #4f5684;
		font-size:60rpx
	}
	.fonta {
		background-image: linear-gradient(to right, #521fad, #7b42e0, #521fad);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fontb {
		background-image: linear-gradient(to right, #7b42e0, #7b42e0);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.fonts {
	    background-image: linear-gradient(to right, #FE6191,#FB6794, #F98DAD);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}

	.fontc {
		background-image: linear-gradient(to right, #6b45aa, #7649c0, #6b45aa);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.font {
	    background-image: linear-gradient(to right, #f93bd7, #FE82E3, #FC5A8B);
	    -webkit-background-clip: text;
	    -webkit-text-fill-color: transparent;
	}

	.tab_top {
		display: flex;
		color: #FFF;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60rpx;
	}

	.colorarea {
		margin-left: 15rpx;
		border-radius: 15rpx 15rpx 0 0;
		color: #4C5482;
		font-size: 27rpx;
	}
	.colortype {
		color: rgba(146,92,254, 0.7);
		font-size: 27rpx;
		font-weight: 600;
		margin-left: 15rpx;
		border-radius: 15rpx 15rpx 0 0;
	}

	.show {
		margin-left: 15rpx;
		margin: 10rpx;
		color: rgba(250, 90, 154, 1);
		font-size: 27rpx;
		font-weight: 600;
		border-bottom: 10rpx solid rgba(250, 90, 154, 1);
		transition: .5s;
	}
    .showtype {
		margin-left: 15rpx;
		margin: 10rpx;
		color: rgba(146,92,254, 0.7);
		font-size: 27rpx;
		font-weight: 600;
		border-bottom: 10rpx solid rgba(146,92,254, 0.7);
		transition: .5s;
	}
	.live {
		display: inline-block;
		text-align: center;
		width: 750rpx;
		height: 80rpx;
		font-size: 35rpx;
		font-weight: 700;
		line-height: 70rpx;
		font-size: 18px;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 275rpx;
		left: 0rpx;
		z-index: 99;
	}

	.vodclass {
		background: #212640;
		margin-top: 15rpx;
		border-radius: 5rpx;
		padding: 10rpx 25rpx;
		color: #666666;
		font-size: 23rpx;
		display: inline-block;
		margin-right: 15rpx;
	}

	.topbg {
		background: linear-gradient(45deg, #7f25b1, #5c34ac, #303086);
		height: 500rpx;
		width: 750rpx;
		border-radius: 0rpx 0rpx 50rpx 50rpx;
	}

	.search {
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 10rpx;
		margin: 20rpx;
		height: 70rpx;
		width: 620rpx;
		margin-top: 90rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.scroll-view {
		width: 750rpx;
		white-space: nowrap;
		height: 65rpx;
		position: fixed;
		top: 140rpx;
		left: 0;
		z-index: 1;
	}

	.swiper {
		margin: 20rpx;
		border-radius: 9rpx;
		height: 350rpx;
		width: 95%;
	}

	.swiper-item>image {
		border-radius: 9rpx;
		width: 100%;
		height: 350rpx;
	}

	.tabg {
		width: 100rpx;
		height: 5rpx;
		text-align: center;
		margin-left: -15rpx;
		background-color: #FA5A9A;
		position: absolute;
		bottom: 0rpx;
		transition: left .5s;
	}

	.scroll-view-area {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15rpx;
		width: 750rpx;
		white-space: nowrap;
		height: 50rpx;
		position: fixed;
		top: 200rpx;
		left: 0;
		z-index: 9999;
	}

	.listv {
		justify-content: space-between;
		margin: 20rpx;
	}

	.scroll-views {
		width: 750rpx;
		white-space: nowrap;
		height: 40rpx;
		position: fixed;
		top: 265rpx;
		left: 0;
		background-color: #feb4cd;
		z-index: 1;
	}

	.swiper_item {
		height: 50rpx;
		width: 90%;
		font-size: 26rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: white
	}

	.tagv {
		display: flex;
		margin-top: 15rpx;
	}

	.tagv>text {
		font-size: 35rpx;
		color: #808080;
		border: 1rpx solid rgba(234, 234, 234, 0.3);
		background-color: rgba(234, 234, 234, 0.3);
		padding: 5rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.load {
		opacity: 0;
		transition: opacity .3s;
	}

	.listv {
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20rpx;
	}

	.list {
		border-radius: 5rpx;
		box-shadow: 10rpx 10rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);
		position: relative;
		background-color: #212640;
		width: 230rpx;
		margin-bottom: 20rpx;
		animation: opacitys .1s;
	}

	.list>image {
		width: 230rpx;
		height: 300rpx;
		border-radius: 8rpx 8rpx 0 0;
		box-shadow: 2px 6px 6px rgba(0, 0, 0, .3);
		background-color: #2b3151;
	}

	.list>view>image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100px;
		margin-right: 10rpx;
		background-color: #2b3151;
	}

	.vodname {
		color: #000000;
		font-weight: 500;
		font-size: 28rpx;
		display: block;
		margin-top: 10rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		opacity: .7;
	}

	.yanyuan {
		margin: 10rpx;
		color: #495189;
		font-weight: 400;
		font-size: 26rpx;
		display: block;
		margin-top: -15rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		opacity: .7;
	}

	.hot {
		margin: 20rpx;
		font-size: 25rpx;
		line-height: 70rpx;
		background-color: #fdc8e1;
		padding: 3rpx 8rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin-top: 10rpx;
	}

	.times {
		margin: 5rpx;
		float: right;
		font-size: 28rpx;
		color: pink;
		line-height: 70rpx;
	}

	.null {
		position: absolute;
		top: 70%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
	}
</style>